<template>
	<view class="container">
		<Navigator2 :title="$t('device.aboutDevice')"></Navigator2>
		<view class="deviceinfo">
			<view class="info">
				<view class="info_left">
					<text>{{ $t('device.deviceCode') }}</text>
				</view>
				<view class="info_right" @click="copyToClipboard(deviceId, $t('device.deviceCode'))">
					<text>{{deviceId}}</text>
				</view>
			</view>
			<view class="info">
				<view class="info_left">
					<text>{{ $t('device.deviceVersion') }}</text>
				</view>
				<view class="info_right" @click="copyToClipboard(version ? version : '1.0.0', $t('device.deviceVersion'))">
					<text>{{version ? version : '1.0.0'}}</text>
				</view>
			</view>
			<view class="info">
				<view class="info_left">
					<text>{{ $t('device.wifiName') }}</text>
				</view>
				<view class="info_right" @click="copyToClipboard(ssid, $t('device.wifiName'))">
					<text>{{ssid}}</text>
				</view>
			</view>
			<view class="info">
				<view class="info_left">
					<text>{{ $t('device.macAddress') }}</text>
				</view>
				<view class="info_right" @click="copyToClipboard(mac, $t('device.macAddress'))">
					<text>{{mac}}</text>
				</view>
			</view>
			<!-- <view class="info">
				<view class="info_left">
					<text>{{ $t('device.networkType') }}</text>
				</view>
				<view class="info_right">
					<text>WiFi 5G</text>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import Navigator2 from '@/components/Navigator2.vue'
	export default {
		data() {
			return {
				id: 0,
				deviceId: '',
				ssid: '',
				mac: '',
				version: '',
				activeIndex: -1
			}
		},
		onLoad(param) {
			console.log('deviceabout onLoad param: ', param)
			this.id = param.id
			this.deviceId = param.deviceId
			if (param.ssid != null && param.ssid !== undefined && param.ssid != 'undefined' && param.ssid != '') {
				this.ssid = param.ssid
			}
			if (param.mac != null && param.mac !== undefined && param.mac != 'undefined' && param.mac != '') {
				this.mac = param.mac
			}
			if (param.version != null && param.version !== undefined && param.version != 'undefined' && param.version != '') {
				this.version = param.version
			}
		},
		methods: {
			copyToClipboard(text, label) {
				if (!text || text === 'undefined' || text === '') {
					uni.showToast({
						title: this.$t('device.empty') + label + this.$t('device.cannotCopy'),
						icon: 'none',
						duration: 2000
					})
					return
				}

				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: this.$t('device.copied') + label,
							icon: 'none',
							duration: 2000
						})
					},
					fail: () => {
						uni.showToast({
							title: this.$t('device.copyFailed'),
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
		},
		components: {
			Navigator2
		}
	}
</script>

<style scoped>
	.container {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #F1F2F5;
	}
	.deviceinfo {
		border-radius: 16px;
		margin: 20px;
		background-color: #FFFFFF;
		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
	}
	.info {
		height: 60px;
		line-height: 60px;
		margin: 0px 20px;
		display: flex;
		position: relative;
	}
	
	.info::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: -20px;
		right: -20px;
		height: 1px;
		background-color: #F3F4F6;
	}
	.info_left {
		width: 90px;
		color: #707A89;
		font-size: 14px;
	}
	.info_right {
		margin-left: auto;
		font-size: 14px;
		overflow: auto;
		/* text-overflow: ellipsis; */
		white-space: nowrap;
	}

</style>
